<template>
	<view class="newRecommend">
		<ul>
			<li v-for="(item,index) in newsGoods">
				<image :src="item.pic"></image>
				<view class="goodsInfo">
					<view class="goodsTitle">{{item.title}}</view>
					<text class="goodsDiscount"> {{item.discount}}</text>
					<view class="product_info_b">
						<text class="integral_num">￥{{item.line_price}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
				<image class="product_info_add" :src="Url+'mine/index/add.png'"></image>
				
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Url:this.Imgurl,
				newsGoods:[
					{
						pic:'../../static/image/mine/index/groupbooking02.png',
						title:'儿童冬款加绒加厚棉服',
						discount:'满139减20',
						price: '79.00',
						line_price: '69.00',
					},
					{
						pic:'../../static/image/mine/index/groupbooking02.png',
						title:'儿童冬款加绒加厚棉服',
						discount:'满139减20',
						price: '79.00',
						line_price: '69.00',
					},
					{
						pic:'../../static/image/mine/index/groupbooking02.png',
						title:'儿童冬款加绒加厚棉服',
						discount:'满139减20',
						price: '79.00',
						line_price: '69.00',
					},
					{
						pic:'../../static/image/mine/index/groupbooking02.png',
						title:'儿童冬款加绒加厚棉服',
						discount:'满139减20',
						price: '79.00',
						line_price: '69.00',
					}
				]
			}
		}

	}
</script>

<style lang="less" scoped>
	ul{
		margin: 0;
		padding: 0;
		li{
			list-style: none;
		}
	}
	ul{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 0 10upx;
		li{
			position: relative;
			width: 47%;
			margin: 15upx 0;
			background: #fff;
			border-radius: 15upx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding-bottom: 15upx;
			font-size: 24upx;
			overflow: hidden;
			
			
			image{
				width: 100%;
				margin-top: 0;
				height: 340upx;
			}
			
			.goodsInfo{
				margin-right: auto;
				margin-top: 15upx;
				padding:15upx;
				.goodsTitle{
					margin-bottom: 10upx;
				}
				.goodsDiscount{
					padding:4upx 6upx;
					background:#ffe6cc;
					color: #ff9900;
					font-size: 22upx;
				}
				.product_info_b {
					font-size: 20upx;
					color: #f73e2f;
					margin-top: 10upx;
				
					.integral_num {
						font-size: 24upx;
						font-weight: bold;
					}
				
					.price {
						margin-left: 20upx;
						color: #999999;
						text-decoration: line-through;
					}
				}
			}
		
			.product_info_add{
				position: absolute;
				width: 60upx;
				height: 60upx;
				bottom: 12upx;
				right: 12upx;
				
			}
		}
	}
</style>
